<template>
	<view class="fullContent bgf8">
		<view class="top_authInfo bgw pd30" @click="goAuditRecord">
			<view class="title">认证审核记录</view>
			<view class="check">
				去查看
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>
		<view class="businessLicense pd30 bgw">
			<view class="title">营业执照</view>
			<img src="../../static/login_logo.png" mode=""></img>
		</view>
		<view class="qualifications pd30 bgw">
			<view class="title">医生资格证明相关照片</view>
			<view class="imgWrap">
				<view v-for="(item,index) in imgList" style="position: relative;">
					<img :src="item.url" mode=""></img>
					<img class="del" v-if="item.clearable" src="../../static/bg/delImg.png" mode=""
						@click="delImg(index)"></img>
				</view>

				<view class="upload" @click="upload"></view>
			</view>
		</view>
		<view class="btn btn1" v-if="!showSubmit">提交</view>
		<view class="btn btn2" v-else>提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgList: [{
						url: '../../static/bg/1.jpg'
					},
					{
						url: '../../static/bg/1.jpg'
					},
					{
						url: '../../static/bg/1.jpg'
					},
					{
						url: '../../static/bg/1.jpg'
					},
				],
				orNum: 0,
				// showSubmit: false
			};
		},
		onLoad() {
			this.orNum = this.imgList.length
			console.log(this.orNum)
		},
		computed: {
			showSubmit() {
				if (this.orNum < this.imgList.length) {
					return true
				} else {
					return false
				}
			}
		},

		methods: {
			// 上传
			upload() {
				this.imgList.push({
					url: '../../static/bg/1.jpg',
					clearable: true
				})
				console.log(this.showSubmit)
			},
			// 删除
			delImg(i) {
				this.imgList.splice(i, 1);
			},
			goAuditRecord() {
				uni.navigateTo({
					url: '../auditRecord/auditRecord'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fullContent {
		padding-bottom: 30upx;
	}

	.title {
		font-size: 32upx;
		color: #414141;
	}

	.top_authInfo {
		height: 96upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32upx;

		.check {
			color: #9F9F9F;
		}
	}

	.businessLicense,
	.qualifications {
		padding-top: 24upx;
		padding-bottom: 46upx;
		margin-bottom: 32upx;

		img {
			margin-top: 24upx;
			width: 328upx;
			height: 192upx;
			border-radius: 8upx;
		}
	}

	.qualifications {
		margin-bottom: 80upx;

		.imgWrap {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.upload {
				margin-top: 24upx;
				width: 328upx;
				height: 192upx;
				background: url(../../static/bg/upload.png) no-repeat;
				background-size: 100% 100%;
			}

			.del {
				width: 48upx;
				height: 48upx;
				position: absolute;
				top: -20upx;
				right: -20upx;
			}
		}
	}

	.btn {
		width: 416upx;
		height: 88upx;
		border-radius: 44px;
		margin: 0 auto;
		font-size: 36upx;
		line-height: 88upx;
		color: #FFFFFF;
		text-align: center;
	}

	.btn1 {
		background: #CCCCCC;
	}

	.btn2 {
		background: #F86C53;
	}
</style>
